<script setup>
import { loadFont } from '@/utils/loadFont.js'
import { LoadingFour, TextBold, TextItalic } from '@icon-park/vue-next'
import { computed, h } from 'vue'
import { useGraphStore } from '@/store/modules/graphStore.js'
import { getGraphColorList } from '@/utils/index.js'
import { ENCODE_LIST } from '@/config/node.config.js'
import { uploadFile } from '@/api/graph.js'
import { Message } from '@arco-design/web-vue'
import { getDictListForKey } from '@/utils/dict.js'
const graphStore = useGraphStore()
const { graph, onChangeNodeAttr } = graphStore
const STATUS_LIST = getDictListForKey('COMMSTATUS')
const DIAGONALTYPE_LIST = getDictListForKey('DIAGONALTYPE')
const CANVASTIMETYPE_LIST = getDictListForKey('CANVASTIMETYPE')
const CANVASDATETYPE_LIST = getDictListForKey('CANVASDATETYPE')
const CANVASHALIGNTYPE_LIST = getDictListForKey('CANVASHALIGNTYPE')
const CANVASVALIGNTYPE_LIST = getDictListForKey('CANVASVALIGNTYPE')
const formatList =
  graph.nodeConfigForm.contentType === 'CONTENT_TYPE_DATE'
    ? CANVASDATETYPE_LIST
    : CANVASTIMETYPE_LIST
const fontList = computed(() => {
  return graph.info.fontList
})
const colorList = getGraphColorList(graph.info.color)
const borderSizeList = [
  { itemValue: 1, itemName: '1' },
  { itemValue: 2, itemName: '2' },
  { itemValue: 3, itemName: '3' },
  { itemValue: 4, itemName: '4' },
  { itemValue: 5, itemName: '5' }
]
const EDIT_FIELDS = computed(() => {
  return Object.keys(graph.nodeConfigForm)
})
const handleChangeNode = async (attr) => {
  if (attr === 'fontType') {
    const loadFontMsg = Message.warning({
      icon: () => {
        return h(LoadingFour, { spin: true })
      },
      content: '加载字体中...',
      duration: 20000
    })
    const fontName = graph.nodeConfigForm[attr]
    await loadFont(fontName)
    loadFontMsg.close()
  }
  onChangeNodeAttr({
    [attr]: graph.nodeConfigForm[attr]
  })
}
const isShowDefaultContentValue = computed(() => {
  const list = [
    'CONTENT_TYPE_TEXT',
    'CONTENT_TYPE_NUMBER',
    'CONTENT_TYPE_BARCODE',
    'CONTENT_TYPE_QRCODE',
    'CONTENT_TYPE_ABORDER'
  ]
  return list.includes(graph.nodeConfigForm.contentType)
})
const isShowDateContentValue = computed(() => {
  return graph.nodeConfigForm.contentType === 'CONTENT_TYPE_DATE'
})
const isShowTimeContentValue = computed(() => {
  return graph.nodeConfigForm.contentType === 'CONTENT_TYPE_TIME'
})
const isShowImgContentValue = computed(() => {
  return graph.nodeConfigForm.contentType === 'CONTENT_TYPE_IMAGE'
})

const handleClickUploadImg = async (option) => {
  try {
    const { fileItem } = option
    const params = new FormData()
    params.append('file', fileItem.file)
    params.append('canvasKey', graph.info.canvasKey)
    const res = await uploadFile(params)
    if (res) {
      graph.nodeConfigForm.contentValue = `${res.data}`
      await handleChangeNode('contentValue')
    }
  } catch (e) {
    console.log(e)
    Message.error(e.message)
  }
}
</script>

<template>
  <a-form size="mini" auto-label-width :model="graph.nodeConfigForm">
    <div class="title mb-4">基础设置</div>
    <div class="box p-2">
      <!-- <a-form-item label="标题" v-if="EDIT_FIELDS.includes('contentTitle')">
        <a-input
          placeholder="文本"
          allow-clear
          v-model="graph.nodeConfigForm.contentTitle"
          @change="handleChangeNode('contentTitle')"
        ></a-input>
      </a-form-item> -->
      <a-form-item label="内容" v-if="EDIT_FIELDS.includes('contentValue')">
        <a-input
          placeholder="内容"
          v-if="isShowDefaultContentValue"
          allow-clear
          v-model="graph.nodeConfigForm.contentValue"
          @change="handleChangeNode('contentValue')"
        ></a-input>
        <a-date-picker
          v-if="isShowDateContentValue"
          v-model="graph.nodeConfigForm.contentValue"
          @change="handleChangeNode('contentValue')"
          allow-clear
          placeholder="内容"
        >
        </a-date-picker>
        <a-date-picker
          v-if="isShowTimeContentValue"
          v-model="graph.nodeConfigForm.contentValue"
          @change="handleChangeNode('contentValue')"
          show-time
          allow-clear
          placeholder="内容"
        >
        </a-date-picker>
        <a-space v-if="isShowImgContentValue">
          <a-input
            :model-value="graph.nodeConfigForm.contentValue"
            readonly
          ></a-input>
          <a-upload
            :show-file-list="false"
            :custom-request="handleClickUploadImg"
            accept=".png,.jpeg,.jpg"
          />
        </a-space>
      </a-form-item>
      <a-form-item label="数据绑定" v-if="EDIT_FIELDS.includes('contentTitle')">
        <a-input
          v-model="graph.nodeConfigForm.contentTitle"
          @change="handleChangeNode('contentTitle')"
          placeholder="数据绑定"
        >
        </a-input>
      </a-form-item>
      <a-form-item label="大小">
        <a-space>
          <a-input-number
            :min="1"
            :step="1"
            :precision="0"
            v-model="graph.nodeConfigForm.width"
            placeholder="宽"
            @change="handleChangeNode('width')"
          ></a-input-number>
          <a-input-number
            :min="1"
            :step="1"
            :precision="0"
            v-model="graph.nodeConfigForm.height"
            placeholder="高"
            @change="handleChangeNode('height')"
          ></a-input-number>
        </a-space>
      </a-form-item>
      <a-form-item label="坐标">
        <a-space>
          <a-input-number
            :min="1"
            :step="1"
            :precision="0"
            v-model="graph.nodeConfigForm.startX"
            placeholder="X轴坐标"
            @change="handleChangeNode('startX')"
          ></a-input-number>
          <a-input-number
            :min="1"
            :precision="0"
            :step="1"
            v-model="graph.nodeConfigForm.startY"
            placeholder="Y轴坐标"
            @change="handleChangeNode('startY')"
          ></a-input-number>
        </a-space>
      </a-form-item>
      <a-form-item label="旋转角度">
        <a-slider
          :default-value="0"
          :max="360"
          style="width: 100%; display: flex"
          v-model="graph.nodeConfigForm.rotate"
          @change="handleChangeNode('rotate')"
          show-input
        />
      </a-form-item>
      <a-form-item label="边框圆角" v-if="EDIT_FIELDS.includes('cornerWidth')">
        <a-space>
          <a-input-number
            :min="1"
            :step="1"
            placeholder="角宽度"
            v-model="graph.nodeConfigForm.cornerWidth"
            :precision="0"
            @change="handleChangeNode('cornerWidth')"
          ></a-input-number>
          <a-input-number
            :min="1"
            :step="1"
            v-model="graph.nodeConfigForm.cornerHeight"
            :precision="0"
            placeholder="角高度"
            @change="handleChangeNode('cornerHeight')"
          ></a-input-number>
        </a-space>
      </a-form-item>
      <a-form-item label="内容底色">
        <a-select
          v-model="graph.nodeConfigForm.contentBackgroundColor"
          @change="handleChangeNode('contentBackgroundColor')"
        >
          <a-option
            v-for="item in colorList"
            :key="item.color"
            :label="item.label"
            :value="item.color"
          ></a-option>
        </a-select>
      </a-form-item>
      <a-form-item label="内容颜色" v-if="EDIT_FIELDS.includes('contentColor')">
        <a-select
          v-model="graph.nodeConfigForm.contentColor"
          @change="handleChangeNode('contentColor')"
        >
          <a-option
            v-for="item in colorList"
            :key="item.color"
            :label="item.label"
            :value="item.color"
          ></a-option>
        </a-select>
      </a-form-item>
      <a-form-item
        label="背景透明"
        v-if="EDIT_FIELDS.includes('backgroundTransparent')"
      >
        <a-select
          placeholder="请选择"
          v-model="graph.nodeConfigForm.backgroundTransparent"
          @change="handleChangeNode('backgroundTransparent')"
        >
          <a-option
            v-for="item in STATUS_LIST"
            :key="item.itemValue"
            :value="item.itemValue"
            :label="item.itemName"
          ></a-option>
        </a-select>
      </a-form-item>
      <a-form-item label="边框" v-if="EDIT_FIELDS.includes('border')">
        <a-select
          placeholder="请选择"
          v-model="graph.nodeConfigForm.border"
          @change="handleChangeNode('border')"
        >
          <a-option
            v-for="item in STATUS_LIST"
            :key="item.itemValue"
            :value="item.itemValue"
            :label="item.itemName"
          ></a-option>
        </a-select>
      </a-form-item>
      <template v-if="graph.nodeConfigForm.border === 1">
        <a-form-item
          label="边框颜色"
          v-if="EDIT_FIELDS.includes('borderColor')"
        >
          <a-select
            placeholder="请选择"
            v-model="graph.nodeConfigForm.borderColor"
            @change="handleChangeNode('borderColor')"
          >
          <a-option
            v-for="item in colorList"
            :key="item.color"
            :label="item.label"
            :value="item.color"
          ></a-option>
          </a-select>
        </a-form-item>
        <a-form-item label="边框宽度" v-if="EDIT_FIELDS.includes('borderSize')">
          <a-select
            placeholder="请选择"
            v-model="graph.nodeConfigForm.borderSize"
            @change="handleChangeNode('borderSize')"
          >
            <a-option
              v-for="item in borderSizeList"
              :key="item.itemValue"
              :value="item.itemValue"
              :label="item.itemName"
            ></a-option>
          </a-select>
        </a-form-item>
      </template>
      <a-form-item label="是否显示" v-if="EDIT_FIELDS.includes('visible')">
        <a-select
          placeholder="请选择"
          v-model="graph.nodeConfigForm.visible"
          @change="handleChangeNode('visible')"
        >
          <a-option
            v-for="item in STATUS_LIST"
            :key="item.itemValue"
            :value="item.itemValue"
            :label="item.itemName"
          ></a-option>
        </a-select>
      </a-form-item>
      <a-form-item label="反显" v-if="EDIT_FIELDS.includes('contentReverse')">
        <a-select
          placeholder="请选择"
          v-model="graph.nodeConfigForm.contentReverse"
          @change="handleChangeNode('contentReverse')"
        >
          <a-option
            v-for="item in STATUS_LIST"
            :key="item.itemValue"
            :value="item.itemValue"
            :label="item.itemName"
          ></a-option>
        </a-select>
      </a-form-item>
    </div>
    <div class="title mb-4">更多设置</div>
    <div class="box p-2">
      <a-form-item
        label="横向对齐"
        v-if="EDIT_FIELDS.includes('contentAlignment')"
      >
        <a-select
          placeholder="横向对齐方式"
          class="w-full"
          v-model="graph.nodeConfigForm.contentAlignment"
          @change="handleChangeNode('contentAlignment')"
        >
          <a-option
            v-for="item in CANVASHALIGNTYPE_LIST"
            :key="item.itemValue"
            :value="item.itemValue"
            :label="item.itemName"
          ></a-option>
        </a-select>
      </a-form-item>
      <a-form-item
        label="纵向对齐"
        v-if="EDIT_FIELDS.includes('contentVerticalAlignment')"
      >
        <a-select
          placeholder="纵向对齐方式"
          class="w-full"
          v-model="graph.nodeConfigForm.contentVerticalAlignment"
          @change="handleChangeNode('contentVerticalAlignment')"
        >
          <a-option
            v-for="item in CANVASVALIGNTYPE_LIST"
            :key="item.itemValue"
            :value="item.itemValue"
            :label="item.itemName"
          ></a-option>
        </a-select>
      </a-form-item>
      <a-form-item label="字体大小" v-if="EDIT_FIELDS.includes('fontSize')">
        <a-input-number
          :min="1"
          :step="1"
          hide-button
          v-model="graph.nodeConfigForm.fontSize"
          placeholder="字体大小"
          @change="handleChangeNode('fontSize')"
        >
          <template #suffix> px</template>
        </a-input-number>
      </a-form-item>
      <a-form-item label="字体" v-if="EDIT_FIELDS.includes('fontType')">
        <a-select
          v-model="graph.nodeConfigForm.fontType"
          placeholder="选择字体"
          @change="handleChangeNode('fontType')"
        >
          <a-option
            v-for="item in fontList"
            :key="item.fontName"
            :value="item.fontName"
            :label="item.fontName"
          ></a-option>
        </a-select>
      </a-form-item>
      <a-form-item label="字体样式" v-if="EDIT_FIELDS.includes('fontBold')">
        <a-checkbox
          class="mr-0"
          v-model="graph.nodeConfigForm.fontBold"
          @change="handleChangeNode('fontBold')"
        >
          <template #checkbox="{ checked }">
            <a-tag :checked="checked" checkable color="arcoblue">
              <template #icon>
                <text-bold theme="outline" />
              </template>
            </a-tag>
          </template>
        </a-checkbox>
        <a-checkbox
          class="mr-0"
          v-model="graph.nodeConfigForm.fontItalic"
          @change="handleChangeNode('fontItalic')"
        >
          <template #checkbox="{ checked }">
            <a-tag :checked="checked" checkable color="arcoblue">
              <template #icon>
                <text-italic theme="outline" />
              </template>
            </a-tag>
          </template>
        </a-checkbox>
      </a-form-item>
      <a-form-item label="连线类型" v-if="EDIT_FIELDS.includes('diagonalType')">
        <a-select
          v-model="graph.nodeConfigForm.diagonalType"
          @change="handleChangeNode('diagonalType')"
        >
          <a-option
            v-for="item in DIAGONALTYPE_LIST"
            :key="item.itemValue"
            :value="item.itemValue"
            :label="item.itemName"
          ></a-option>
        </a-select>
      </a-form-item>
      <a-form-item label="自动缩放" v-if="EDIT_FIELDS.includes('autoScale')">
        <a-select
          v-model="graph.nodeConfigForm.autoScale"
          @change="handleChangeNode('autoScale')"
        >
          <a-option
            v-for="item in STATUS_LIST"
            :key="item.itemValue"
            :label="item.itemName"
            :value="item.itemValue"
          ></a-option>
        </a-select>
      </a-form-item>
      <a-form-item label="抖动" v-if="EDIT_FIELDS.includes('imageDithering')">
        <a-select
          v-model="graph.nodeConfigForm.imageDithering"
          @change="handleChangeNode('imageDithering')"
        >
          <a-option label="无" value="NONE"></a-option>
          <a-option label="算法A" value="TYPE_A"></a-option>
          <a-option label="算法B" value="TYPE_B"></a-option>
        </a-select>
      </a-form-item>
      <a-form-item label="线宽度" v-if="EDIT_FIELDS.includes('lineThickness')">
        <a-input-number
          :min="1"
          :step="1"
          hide-button
          v-model="graph.nodeConfigForm.lineThickness"
          placeholder="线宽度"
          @change="handleChangeNode('lineThickness')"
        >
          <template #suffix> px</template>
        </a-input-number>
      </a-form-item>
      <a-form-item label="下划线" v-if="EDIT_FIELDS.includes('textDecoration')">
        <a-select
          v-model="graph.nodeConfigForm.textDecoration"
          @change="(value) => handleChangeNode('textDecoration', value)"
        >
          <a-option value="none">无</a-option>
          <a-option value="strikethrough">删除线</a-option>
          <a-option value="underline">下划线</a-option>
        </a-select>
      </a-form-item>

      <a-form-item label="日期格式" v-if="EDIT_FIELDS.includes('format')">
        <a-space>
          <a-select
            v-model="graph.nodeConfigForm.format"
            @change="handleChangeNode('format')"
          >
            <a-option
              v-for="item in formatList"
              :key="item.itemValue"
              :value="item.itemValue"
              :label="item.itemName"
            >
            </a-option>
          </a-select>
          <a-input
            placeholder="分隔符"
            v-model="graph.nodeConfigForm.separator"
            @change="handleChangeNode('separator')"
          >
          </a-input>
        </a-space>
      </a-form-item>
      <a-form-item label="时区" v-if="EDIT_FIELDS.includes('timezone')">
        <a-select
          v-model="graph.nodeConfigForm.timezone"
          @change="handleChangeNode('timezone')"
        >
          <a-option value="UTC+8">东八区</a-option>
        </a-select>
      </a-form-item>
      <a-form-item label="条码高度" v-if="EDIT_FIELDS.includes('barHeight')">
        <a-input-number
          :min="1"
          :step="1"
          :precision="0"
          hide-button
          v-model="graph.nodeConfigForm.barHeight"
          placeholder="条码高度"
          @change="handleChangeNode('barHeight')"
        >
        </a-input-number>
      </a-form-item>
      <a-form-item
        label="编码格式"
        v-if="EDIT_FIELDS.includes('humanReadableFontType')"
      >
        <a-select
          v-model="graph.nodeConfigForm.humanReadableFontType"
          placeholder="请选择编码格式"
          @change="handleChangeNode('humanReadableFontType')"
        >
          <a-option
            v-for="item in ENCODE_LIST"
            :key="item"
            :value="item"
            :label="item"
          ></a-option>
        </a-select>
      </a-form-item>

      <a-form-item
        label="宽度缩放"
        v-if="EDIT_FIELDS.includes('autoScaleWidth')"
      >
        <a-select
          v-model="graph.nodeConfigForm.autoScaleWidth"
          @change="handleChangeNode('autoScaleWidth')"
        >
          <a-option
            v-for="item in STATUS_LIST"
            :key="item.itemValue"
            :label="item.itemName"
            :value="item.itemValue"
          ></a-option>
        </a-select>
      </a-form-item>
      <a-form-item
        label="宽度压缩"
        v-if="EDIT_FIELDS.includes('autoNarrowWidth')"
      >
        <a-select
          v-model="graph.nodeConfigForm.autoNarrowWidth"
          @change="handleChangeNode('autoNarrowWidth')"
        >
          <a-option
            v-for="item in STATUS_LIST"
            :key="item.itemValue"
            :label="item.itemName"
            :value="item.itemValue"
          ></a-option>
        </a-select>
      </a-form-item>
      <a-form-item
        label="高度拉伸"
        v-if="EDIT_FIELDS.includes('autoStretchHeight')"
      >
        <a-select
          v-model="graph.nodeConfigForm.autoStretchHeight"
          @change="handleChangeNode('autoStretchHeight')"
        >
          <a-option
            v-for="item in STATUS_LIST"
            :key="item.itemValue"
            :label="item.itemName"
            :value="item.itemValue"
          ></a-option>
        </a-select>
      </a-form-item>
      <a-form-item label="空格换行" v-if="EDIT_FIELDS.includes('splitBySpace')">
        <a-select
          v-model="graph.nodeConfigForm.splitBySpace"
          @change="handleChangeNode('splitBySpace')"
        >
          <a-option
            v-for="item in STATUS_LIST"
            :key="item.itemValue"
            :label="item.itemName"
            :value="item.itemValue"
          ></a-option>
        </a-select>
      </a-form-item>
      <a-form-item label="行距" v-if="EDIT_FIELDS.includes('lineSpacing')">
        <a-input-number
          :min="12"
          :step="1"
          hide-button
          v-model="graph.nodeConfigForm.lineSpacing"
          placeholder="行距"
          @change="handleChangeNode('lineSpacing')"
        >
          <template #suffix> px</template>
        </a-input-number>
      </a-form-item>
    </div>
  </a-form>
</template>

<style lang="less" scoped>
.graph-right-panel {
  width: 100%;
  transition: all 0.3s ease-in-out;
  position: relative;

  .title {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    position: relative;
    padding-left: 12px;
    line-height: 24px;
    height: 24px;
    color: var(--color-neutral-10);
    border-left: 4px solid rgb(var(--arcoblue-6));
    font-weight: 500;
  }
}
</style>
